<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function diamond(Odd_Number, Str_Shape) {
        var n = Odd_Number;
        var str = Str_Shape;
        for (var i = 1; i <= n; i++) {
          if (i <= (n + 1) / 2) {
            //  条件判断，先打印一个正三角
            for (var k = 1; k <= (n + 1) / 2 - i; k++) {
              document.write(
                // "<span style='visibility:hidden'>" + str + "</span>"
                "<span>" + str + "</span>"
              );
            }
            for (var j = 1; j <= 2 * i - 1; j++) {
              document.write(str);
            }
            document.write("<br>");
          } else {
            //打印一个倒三角
            for (var j = 1; j <= i - (n + 1) / 2; j++) {
              document.write(
                // "<span  style='visibility:hidden'>" + str + "</span>"
                "<span>" + str + "</span>"
              );
            }
            for (var a = 1; a <= n - 2 * (j - 1); a++) {
              document.write(str);
            }
            document.write("<br>");
          }
        }
        //这段代码必须下在for循环之外，因为for循环中用JS写的HTML标签还没有生成
        //这里的span是一堆标签，所以选择使用.querySelectorAll()函数，并通过循环来进行样式的更改
        var star_white = document.querySelectorAll("span");
        for (var i = 0; i < star_white.length; i++) {
          star_white[i].style.visibility = "hidden";
        }
      }
      var str = "⭐";
      diamond(5, str);
    </script>
  </body>
</html>
